<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
  <!DOCTYPE html>
  <html>

  <head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="css/register.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/code.js"></script>
  </head>
  <body>
    <%@include file="header.jsp" %>
      <section>
        <div id="register">
          <a href="index.jsp"><img src="images/c4.jpg" id="bg-img"></a>
          <div class="select">
            <div class="tabBox">
              <p id = "register-user" class="reg_hide">个人注册</p>
            </div>
              <div class="re_error">
                  <label class="register_error"></label>
              </div>
            <div class = "reg_user">
				<div class = "reg">
					<label class="select-country" for="username">用户账号:</label>
					<input class="field" type="text" name="username" id="username" placeholder="账号"/>
				</div>
				<div class = "reg">
					<label class="select-country" for="password">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
					<input class="field" type="password" name="password" id="password" placeholder="密码"/>
				</div>
				<div class = "reg">
					<label class="select-country" for="password">确认密码:</label>
					<input class="field" type="password" name="okPassword" id="okPassword" placeholder="密码"/>
				</div>
				<div class = "regCode">
					<label class="select-country float-left">验&nbsp;证&nbsp;&nbsp;码：</label>
					<input type="text" id="Test" class="inputCode float-left" placeholder="验证码"/>
                    <canvas id="TestNum" width="110" height="48"></canvas>
				</div>
                <div class="form-item">
                        <input type="button" class="fill" value="注册"  onclick="registerbtn()">
                </div>
				<div class="readme">
                    <label>
                        <input type="checkbox" id="UserCheckbox" class = "userCheckbox">
                        <span class="checkbox"></span>
                        <span>我已同意<a href="" target="_blank">《旗木宠物用户使用协议》</a>和<a href="" target="_blank">《旗木宠物隐私政策》</a></span>
                    </label>
            		<p class = "logins">已有账号，立即 <a href="login.jsp">登录</a></p>
                </div>
            </div>
          </div>
        </div>
      </section>
      <%@include file="footer.jsp" %>
  </body>
  </html>
<script src="js/jquery.min.js"></script>
<script>
    //初始化
    window.onload = function(){
        draw(); //初始化验证码
    };
    var textNum = $('#TestNum');
    textNum.click(function () {
        draw();
    })
    function registerbtn() {
        var user_name = $(".reg").find("#username").val();
        var user_pwd = $(".reg").find("#password").val();
        var user_okPassword = $(".reg").find("#okPassword").val();
        var register_error = $(".register_error");
        var UserCheckbox = $("#user_checkbox");
        var test = $("#Test").val();
        var testBtn = showNum.join('');
        if ((user_name == "") || (user_pwd == "") || (user_okPassword == "")) {
            register_error.text("账号和密码不能为空");
        }else if (user_okPassword == "" || user_pwd != user_okPassword){
            register_error.text("两次密码不一致");
        }else if (UserCheckbox.checked) {
            register_error.text("未勾选");
        }else if ((test == "") || test != testBtn) {
            register_error.text("验证码错误");
        }else {
            $.ajax({
                type:"POST",
                url:"user/register",
                data:{
                    username:user_name,
                    userPwd:user_pwd
                },
                success:function (res){
                    if (res == "existed"){
                        register_error.text("账户已存在");
                    }else if (res == "success"){
                        register_error.text("注册成功");
                        window.location.href="login.jsp";
                    }else if (res == "fail"){
                        register_error.text("注册失败");
                    }
                },
                error:function (){
                    alert("error");
                }
            })
        }
        draw();
    }
</script>